<template>
    <div class="heading">
        <div class="title">
            <h1>旅游景区</h1>
        </div>
    </div>

    <section class="container">
        <Select :citiestitle="citiestitle" @getCityId="getCityId"></Select>
        <Spot :spotListValue="spotListValue"></Spot>

        <div class="page" v-if="total != 0">
            <el-pagination v-model:current-page="ListDto.pageNum" size="small" background layout="prev, pager, next"
                v-model:page-size="ListDto.pageSize" @current-change="handleCurrentChange" :total="total"
                class="mt-4" />
        </div>

    </section>
</template>


<script setup>
import Select from '@/components/Spot/select.vue';
import Spot from '@/components/Spot/spot.vue';
import { getAllCitiesAPI, getSpotListAPI } from '@/api'
import { ref, reactive } from 'vue';

const ListDto = reactive({
    pageSize: 6,
    pageNum: 1,
    cityId: ''
})

let citiestitle = ref()
const handleCurrentChange = (val) => {
    ListDto.pageNum = val
    initSpotList()
}
let spotListValue = ref()
let total = ref(0)
const initCitytitle = async () => {
    const res = await getAllCitiesAPI()
    citiestitle.value = res
}
const getCityId = (val) => {
    ListDto.cityId = val
    initSpotList()
}
const initSpotList = async () => {
    const res = await getSpotListAPI(ListDto)
    spotListValue.value = res.rows
    total.value = Number(res.total)
}
initCitytitle()
initSpotList()

</script>

<style lang="scss" scoped>
.heading {
    min-height: 50vh;
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
    background: url("@/assets/image/header-bg-1.png") no-repeat;
}

.heading .title {
    text-align: center;
    align-items: center;
    font-size: 2rem;
    color: #fff;
}

section {
    padding: 2rem 6%;
}

.page {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 2rem;
}
</style>